<!--
	作者：leeeeyx@hotmail.com
	时间：2017-06-20
	描述：angular-ui-tree style
-->
<meta charset="UTF-8">
<div class="content-wrapper">
	<!-- Content Header (Page header) -->
	<section class="content-header">
		<h1 style="text-align:center">
        物料管理
          
      </h1>

	</section>

	<!-- Main content -->
	<section class="content">
		<div class="row">
			<div class="col-md-4" style="max-height: 600px;overflow-y: auto;">
				<div class="box box-info">
					<!-- box header -->
					<div class="box-header with-border">
						<h3 class="box-title">全部分类</h3>
					</div>
					<!-- /.box-header -->

					<div class="box-body">

						<div>
							<div ui-tree id="tree-root" class="ng-scope angular-ui-tree" data-drag-enabled="false">
								<ol ui-tree-nodes ng-model="data" class="ng-pristine ng-untouched ng-valid ng-scope angular-ui-tree-nodes">
									<li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer'" class="ng-scope angular-ui-tree-node" collapsed="false">
									</li>
								</ol>
							</div>
						</div>

					</div>
					<!-- /.box-body -->

				</div>
				<!-- /.box -->
			</div>
			<div class="col-md-8" style="max-height: 600px;overflow-y: auto;">
				<!--1. 未点击时显示提示 -->
				<div class="box box-info " ng-show="firstM">
					<!-- box header -->
					<div class="box-body">
						<div class="box-header with-border" align="center">
							<h2>点击原料查看详情</h2>
						</div>
					</div>
				</div>
				<!-- 2.  body2 查看物料详情 -->
				<div class="box box-info form-horizontal" ng-show="showM">
					<!-- box header -->
					<div class="box-header with-border">
						<h3 class="box-title">物料详情</h3>
					</div>
					<!-- body2 查看物料详情 -->
					<div class="box-body">
						<div class="form-group">
							<label class="col-sm-2 control-label">物料类别</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
							<label class="col-sm-2 control-label">标准成分</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">上级分类</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
							<label class="col-sm-2 control-label">原料成本</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">物料名称</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
							<label class="col-sm-2 control-label">制作车间</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">拼音助记</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
							<label class="col-sm-2 control-label">加工时长</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">物料条码</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
							<label class="col-sm-2 control-label">出净率</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">物料单位</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
							<label class="col-sm-2 control-label">负责人</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">物料规格</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
							<label class="col-sm-2 control-label">物料备注</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" placeholder="餐别名称" ng-model="newPeriod.name" ng-required='true'>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /.row -->
	</section>
	<!-- /.content -->
</div>
<script type="text/ng-template" id="nodes_renderer">
	<div ui-tree-handle class="tree-node tree-node-content" ng-click="activeDiv(node.id,$event)">
		<a class="btn btn-success btn-xs " ng-if="node.child && node.child.length > 0" data-nodrag ng-click="toggle(this)">
			<span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span></a>
		{{node.name}}
		<a class="pull-right btn btn-primary btn-xs" data-nodrag="" ng-click="newSubItem(node.id,$event)" style="margin-right: 8px;">
			<span class="glyphicon glyphicon-plus"></span>
		</a>
	</div>
	<ol ui-tree-nodes="" ng-model="node.child" ng-class="{hidden: collapsed}">
		<li ng-repeat="node in node.child" ui-tree-node ng-include="'nodes_renderer'">
		</li>
	</ol>
</script>